<template>
    <div class="row_center">
        <label class="less">{{ props.name }}</label>
        <div class="point" :style="{ backgroundColor: color }"></div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';


interface InCtx {
    name: string,
    value: boolean,
}

const props = defineProps<InCtx>();

const color = computed(() => {
    if (props.value) {
        return 'red';
    }
    return 'gray';
})

</script>

<style scoped>

.point {
    width: 20px;
    height: 20px;
    border-radius: 10px;
}

</style>

